<template>
  <div class="chat">
    <div class="chat-top">
      <div class="chat-top-center">
        <img class="message" src="../../assets/image/message.jpg" alt="">
        <div class="center-top" >WhatsApp <img class="pass" src="../../assets/image/duihao.png" alt=""></div>
        <div class="pro">WhatsApp Official</div>
        <div class="pro">Account</div>
      </div>
    </div>
    <div class="chat-content" ref="scrollContainer">
      <div class="chat-item">
        <div class="item-l">
          <img class="message" src="../../assets/image/message.jpg" alt="">
        </div>
        <div class="item-r">
          <img class="tips" src="../../assets/image/tips.png" alt="">
        </div>
      </div>
      <div class="chat-item">
        <div class="item-l">
          <img class="message" src="../../assets/image/message.jpg" alt="">
        </div>
        <div class="item-r">
          <div class="message-bubble">
            {{ $t('startVerify.msg1') }}
            <!--            這裡是WhatsApp安全驗證中心，它能幫助用戶解決賬號風險/異常等問題，提供更安全的防護，在WhatsApp隱私和安全是我們的DNA，我們致力於為全球20億用戶維持最高的安全標準。-->
          </div>
        </div>
      </div>


      <div class="chat-item">
        <div class="item-l">
          <img class="message" src="../../assets/image/message.jpg" alt="">
        </div>
        <div class="item-r">
          <div class="message-bubble">
            {{ $t('startVerify.msg2') }}
            <div class="button" @click="toVerification">
              {{ $i18n.locale === 'en' ? '【Start verification】' : '【開始驗證】' }}
            </div>
          </div>
        </div>
      </div>


      <template v-if="isVerification">

        <div class="chat-item">
          <div class="item-l">
            <img class="message" src="../../assets/image/message.jpg" alt="">
          </div>
          <div class="item-r">
            <div class="message-bubble">
              <img class="tips" src="../../assets/image/tips-iphone.png" alt="">
              <br />
              🟢{{ $t('autoVerify.optionTips1') }}
              <br />  <br />
              <img class="tips" src="../../assets/image/tips-android.png" alt="">
              <br />
              🟢{{ $t('autoVerify.optionTips2') }}
            </div>
          </div>
        </div>




        <div class="chat-item">
          <div class="item-l">
            <img class="message" src="../../assets/image/message.jpg" alt="">
          </div>
          <div class="item-r">
            <div class="message-bubble">
              🟢{{ $t('autoVerify.btnTitleTips') }}
              <div class="button" @click="$router.push('/verification')">
                【{{ $t('autoVerify.autoVerifyBtn') }}】
              </div>
            </div>
          </div>
        </div>
      </template>


    </div>


  </div>
</template>

<script>
// import { getUserInfo } from '@/api/base'
export default {
  name: 'home-index',
  data() {
    return {
      isVerification: false
    }
  },
  created() {
    this.$i18n.locale = 'en'
  },
  methods: {
    // 请求示例
    // async getUser () {
    //   try {
    //     const resp = await getUserInfo()
    //     console.log(resp)
    //   } catch (err) {
    //     console.log(err)
    //   }
    // },
    toVerification() {
      this.isVerification = true
      setTimeout(()=>{
        this.scrollToBottom()
      },500)
    },
    scrollToBottom() {
      const container = this.$refs.scrollContainer;
      container.scrollTop = container.scrollHeight + 200;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.chat{
  height: 100vh;
  display: flex;
  flex-direction: column;
  .chat-top{
    flex:0 0 100px;
    background-color: #02A884;

    border-bottom: .2rem solid #35383f;;
    .chat-top-center{
      width: fit-content;
      margin: 0 auto;
      position: relative;
      .center-top{
        font-size: 20px;
        color: #3b4a54;
        position: relative;
        padding-top: 16px;
        margin-bottom: 4px;
        .pass{
          width: 25px;
          height: 25px;
          position: absolute;
          right: -28px;
          top: 20px;
        }
      }
      .pro{
        color: #c2ddfa;
        font-size: 12px;
      }

      .message{
        width: 40px;
        height: 40px;
        position: absolute;
        left: -50px;
        top: 35%;
        //background-color: #ffffff;
        border-radius: 50%;
      }
    }
  }

  .chat-content{
    overflow-y: scroll;
    flex: 1;
    .chat-item{
      display: flex;
      margin: 1.5rem 10px 10px;

      .item-l{
        flex: 0 0 50px;
        .message{
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
      .item-r{
        max-width: 320px;
        width: 290px;
        .tips{
          width: 100%;
          height: auto;
          border-radius: .5rem;
          overflow: hidden;
        }
        .message-bubble{
          background-color: #f2f7fe;
          border-radius: 1rem;
          padding: 1rem;
          color: #000;
          font-weight: 700;
          letter-spacing: .5px;
          line-height: 1.5;
          font-size: 14px;
          .button{
            text-align: center;
            height: 48px;
            line-height: 48px;
            background: linear-gradient(to right, #538ef8, #0ac6c3);
            color: #fff;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            margin: 0.6rem auto 0;
            //margin-bottom: .6rem;
          }
        }
      }
    }
  }
}
</style>
